import React, { Component } from 'react'
import { Card, Button, Table } from 'antd';
import "./index.less"
export default class Product extends Component {
    constructor(props) {
        super(props);
        this.columns = [
            {
                title: '姓名',
                dataIndex: 'name',
            },
            {
                title: '年龄',
                dataIndex: 'age',
            },
            {
                title: '住址',
                dataIndex: 'address'
            },
            {
                title: '操作',
                width: 200,
                render: () => (<span>
                    <Button type="link">修改</Button>
                    <Button type="link">详情</Button>
                </span>)
            }
        ];
    }
    state = {
        dataSource: [
            {
                key: '1',
                name: '胡彦斌',
                age: 32,
                address: '西湖区湖底公园1号',
            },
            {
                key: '2',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            },
        ]
    }

    render() {
        const { dataSource } = this.state

        let title = "一级列表"
        let extra = (<Button type="primary" icon="plus">新建</Button>)
        return (
            <div className="product-container">
                <div className="product-content">
                    <Card title={title} extra={extra} style={{ width: '100%' }}>
                        <Table dataSource={dataSource} columns={this.columns} rowKey="name" bordered />
                    </Card>
                </div>
            </div>
        )
    }
}
